<template>
  <div>
    <div>
      <van-button type="default">取消</van-button>
      <van-button type="info">完成</van-button>
    </div>
    <!-- 上面图标 -->
    <div>
      <h3>我的应用</h3>
      <van-grid square>
        <van-grid-item
          v-for="(item, index) in listName"
          :key="index"
          :text="item.listName2"
        >
          <van-icon :class="['iconfont ', item.iconName]" />
          <p v-text="item.listName2" style="fontsize: 12px"></p>
        </van-grid-item>
      </van-grid>
    </div>
    <hr />
    <div>
      <h3>最近使用</h3>
      <van-grid square>
        <van-grid-item
          v-for="(item, index) in listName2"
          :key="index"
          :text="item.listName2"
          @click="addIcon(index)"
        >
          <van-badge>
            <div class="child" />
            <template #content>
              <van-icon name="cross" class="badge-icon" />
            </template>
            <van-icon :class="['iconfont ', item.iconName]" />
            <p v-text="item.listName2" style="fontsize: 12px"></p>
          </van-badge>
          <!-- <van-icon :class="['iconfont ', item.iconName]" />
          <p v-text="item.listName2" style="fontsize: 12px"></p> -->
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem, Icon, Button, Image, Badge } from "vant";
import "vant/lib/index.css";
// 导入阿里巴巴图标样式
import "../assets/font_sauar30jfc/iconfont.css";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Icon);
Vue.use(Image);
Vue.use(Button);
Vue.use(Badge);

export default {
  data() {
    return {
      listName: [
        {
          nameId: 1,
          iconName: "icon-elment",
          listName2: "饿了么",
        },
        {
          nameId: 2,
          iconName: "icon-koubei",
          listName2: "口碑",
        },
        {
          nameId: 3,
          iconName: "icon-shiminzhongxin",
          listName2: "市民中心",
        },
        {
          nameId: 4,
          iconName: "icon-dianyingyanchu",
          listName2: "电影演出",
        },
        {
          nameId: 5,
          iconName: "icon-zhuanzhang",
          listName2: "转账",
        },
        {
          nameId: 6,
          iconName: "icon-xinyongqiahuankuan",
          listName2: "信用卡还款",
        },
        {
          nameId: 7,
          iconName: "icon-shouji54",
          listName2: "充值中心",
        },
        {
          nameId: 8,
          iconName: "icon-yuebao",
          listName2: "余额宝",
        },
        {
          nameId: 9,
          iconName: "icon-huabei",
          listName2: "花呗",
        },
        {
          nameId: 10,
          iconName: "icon-elment",
          listName2: "我的账本",
        },
        {
          nameId: 11,
          iconName: "icon-xinbaniconshangchuan-",
          listName2: "记账本",
        },
      ],
      listName2: [
        {
          nameId: 1,
          iconName: "icon-yundong",
          listName2: "运动",
        },
        {
          nameId: 2,
          iconName: "icon-senlin",
          listName2: "蚂蚁森林",
        },
        {
          nameId: 3,
          iconName: "icon-niu",
          listName2: "蚂蚁庄园",
        },
        {
          nameId: 4,
          iconName: "icon-yuebao",
          listName2: "支付宝会员",
        },
        {
          nameId: 5,
          iconName: "icon-yinxingqia",
          listName2: "银行卡",
        },
        {
          nameId: 6,
          iconName: "icon-jiebei",
          listName2: "借呗",
        },
        {
          nameId: 7,
          iconName: "icon-jiankangma",
          listName2: "医保卡",
        },
        {
          nameId: 8,
          iconName: "icon-shouji54",
          listName2: "网商银行",
        },
        {
          nameId: 9,
          iconName: "icon-huabei",
          listName2: "花呗",
        },
        {
          nameId: 10,
          iconName: "icon-hongbao",
          listName2: "消费券",
        },
        {
          nameId: 11,
          iconName: "icon-gupiao-copy",
          listName2: "股票",
        },
      ],
    };
  },
  components: {},
  methods: {
    addIcon(index) {
      console.log(this.listName[index]);
      this.listName.push(this.listName2[index]);
      this.listName2.splice(index, 1);
    },
  },
};
</script>

<style  scoped>
.child {
  width: 40px;
  height: 40px;
  background: #f2f3f5;
  border-radius: 4px;
}
</style>